<template>
    <header class="bg-white shadow-sm w-full">
        <div class="max-w-8xl mx-auto h-20 flex items-center justify-between bg-blue-500 px-4">
            <!-- 左侧Logo和标题 -->
            <div class="flex items-center gap-2 md:ml-10">
                <img src="https://ai-public.mastergo.com/ai/img_res/98e4ef6ff43ed36aef342f621911dba5.jpg" alt="logo"
                    class="w-10 h-10 object-cover" />
                <span class="text-3xl font-medium text-white" @click="goHome">人才成长画像</span>
            </div>

            <!-- 中间导航菜单（改为flex布局） -->
            <nav class="hidden md:flex md:space-x-5 mx-8 md:ml-80">
                <a href="http://localhost:5173" class="text-white hover:text-blue-200 inline-flex items-center px-1 pt-1 border-b-2 border-blue-300 text-2xl font-medium transition-colors">
                    首页
                </a>
                <a href="#" class="text-white hover:text-blue-200 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-2xl font-medium transition-colors">
                    个人中心
                </a>
                <a href="#" class="text-white hover:text-blue-200 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-2xl font-medium transition-colors">
                    成长轨迹
                </a>
                <a href="#" class="text-white hover:text-blue-200 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-2xl font-medium transition-colors">
                    评价系统
                </a>
            </nav>

            <!-- 右侧区域 -->
            <div class="flex items-center gap-6">
                <!-- 搜索框 -->
                <div class="relative hidden md:block md:mr-5">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <input 
                        type="text" 
                        class="block w-50 h-12 pl-10 pr-3 py-2 border border-solid border-blue-300/30 rounded-lg bg-blue-400/20 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:bg-blue-500/30 transition-all duration-200 text-sm shadow-inner"
                        placeholder="搜索"
                    >
                </div>

                <!-- 登录/注册或用户头像 -->
                <div class="flex items-center gap-4" v-if="token == null">
                    <button class="text-white hover:text-blue-200 !rounded-button whitespace-nowrap"
                        @click="tologin()">登录</button>
                    <button class="px-4 py-2 bg-white text-blue-500 hover:bg-blue-100 !rounded-button whitespace-nowrap"
                        @click="toregister()">注册</button>
                </div>
                <div class="relative flex items-center gap-2 md:mr-10" v-else>
                    <div class="relative h-10 w-10 overflow-hidden rounded-full" @click="toBoss">
                        <img :src="avatar" alt="用户头像" class="h-full w-full object-cover cursor-pointer" />
                        <div v-if="isOnline"
                            class="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-white bg-green-500"></div>
                    </div>
                    <button class="px-3 py-1 text-red-500 hover:text-red-600 bg-red-50 rounded-full text-lg"
                        @click="logout()">退出</button>
                </div>
            </div>
        </div>
    </header>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getEmployer } from "../api/boss/boss.js";

let avatar = ref();
let userName = ref();
let position = ref();

onMounted(() => {
    if (localStorage.getItem("userInfo")!==null){
        get_employer(JSON.parse(localStorage.getItem("userInfo")).account)
    }
})
function get_employer(data) {
  getEmployer(data).then(function (response) {
    avatar.value = response.user.userImg;
    userName.value = response.user.userName;
    position.value = response.employer.position;
  })
}
function goHome() {
    router.push("/Boss");
}

const router = useRouter();
const token = ref(localStorage.getItem("userInfo"));
const avatarUrl = 'https://ai-public.mastergo.com/ai/img_res/256173fbe357dd1d88037ab9ae309e8d.jpg';
const isOnline = ref(true); // 假设在线状态

function tologin() {
    router.push({ path: '/login' });
}
function toregister() {
    router.push({ path: '/register' });
}
function toBoss() {
    router.push({ path: '/boss-space' });
}

function logout() {
    // 清除本地存储的 token 或其他用户信息
    localStorage.removeItem("prehaslogin")
    localStorage.removeItem("userInfo");
    token.value = null;
    router.push({ path: '/login' });
}
</script>

<style scoped>
/* 添加一些样式以增强退出按钮的视觉效果 */
button:hover {
    transition: all 0.2s ease;
}</style>